<script lang="ts" setup>
type Props = {
  url: string
  cetName: string
}
withDefaults(defineProps<Props>(), {})
</script>

<template>
  <div class="user_list_item">
    <n-avatar :size="40" :src="url" />
    <div class="cetName">{{ cetName }}</div>
    <slot name="suffix"></slot>
  </div>
</template>

<style lang="less" scoped>
.user_list_item {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  user-select: none;
  -webkit-app-region: no-drag;
  &:hover {
    background-color: #dfdddb;
  }
  .n-avatar {
    img {
      object-fit: cover;
    }
  }
  .cetName {
    margin-left: 20px;
    user-select: none;
    flex: 1;
  }
}

.active {
  background-color: #c8c6c5;
  &:hover {
    background-color: #c8c6c5;
  }
}
</style>
